import { Square } from "../Square";
import { IView } from "../types";
import $ from 'jquery'
import PageConfig from "./PageConfig";

/**
 * 显示小方块到页面
 */
export class SquarePageViewer implements IView {

  private dom?: JQuery<HTMLElement>
  private isRemove = false // 是否已经移除
  constructor(
    private square: Square,
    private container: JQuery<HTMLElement>  // jquery容器类型
  ) {

  }
  show(): void {
    if (this.isRemove) return
    if (!this.dom) {
      this.dom = $("<div>").css({
        position: 'absolute',
        width: PageConfig.SquareSize.width,
        height: PageConfig.SquareSize.height,
        border: "1px solid #ccc",
        boxSizing: 'border-box'
      }).appendTo(this.container)
    }
    this.dom.css({
      left: this.square.point.x * PageConfig.SquareSize.width,
      top: this.square.point.y * PageConfig.SquareSize.height,
      background: this.square.color
    })
  }
  remove(): void {
    if (this.dom && !this.isRemove) {
      this.dom.remove()
      this.isRemove = true
    }
  }

}
